/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */
@import '@/styles/common.less';

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  // color: #fff;
  height: 100vh;
  background:@page-background-color;
}
.content{
  background: @page-background-color;
}

/**
子路由容器样式
**/
.child_content{
  background: @page-background-color;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
}

.@{container-prefix}-breadcrumb{
  background-color: @page-container-color;
  padding: 16px 32px;
  a{
    color: #89939b !important;
  }
}

/** 页面布局样式**/
.page_header{
  padding: 16px 0 16px 32px;
  background: @page-container-color;
  box-shadow: inset 0px -1px 0px rgba(229,229,229,1);
  .@{container-prefix}-breadcrumb{
    padding: 0 !important;
  }
}
.page_header_noPadding{
  padding: 16px 0 16px 0px;
  background: @page-container-color;
  box-shadow: inset 0px -1px 0px rgba(229,229,229,1);
}
.page_content{
  margin: 20px 32px;
  background: @page-container-color;
}

.common_icon{
  width: 20px;
  height: 20px;
}

.common_antd_icon{
  svg{
    width: 20px;
    height: 20px;
  }
}

/**icon 普通**/
.primary_icon{
  color:@icon-normal_color;
  cursor: pointer;
}
.primary_icon:hover{
  color:@icon-hover-color;
}

.primary_color{
  color: @button-normal-color;
}
.@{container-prefix}-btn-primary{
  background-color: @button-normal-color;
}
.@{container-prefix}-btn-primary:hover{
  background-color: @button-hover-color !important;
}
.@{container-prefix}-btn-primary:active{
  background-color: @button-click-color;
}

/**tab 全局样式**/
.@{container-prefix}-tabs-tab-active .@{container-prefix}-tabs-tab-btn{
  color: @a-link-color !important;
}
.@{container-prefix}-tabs-ink-bar{
  background: @a-link-color !important;
}

//菜单栏颜色
.@{container-prefix}-menu-item-selected{
  color: @a-link-color !important;
  background-color: #CFE7FF !important;
}
.@{container-prefix}-menu-submenu-selected{
  .@{container-prefix}-menu-submenu-title{
    color: @a-link-color !important;
  }
  .@{container-prefix}-menu-submenu-title:active{
    background-color: #CFE7FF !important;
  }
}

//面包屑颜色
.@{container-prefix}-breadcrumb{
  background-color: @page-container-color;
  padding: 16px 0 0 32px;
  a{
    color: @narbar-and-content-color !important;
  }
}

//输入框颜色
.@{container-prefix}-input,.@{container-prefix}-input-search-button{
  border-color: @border-normal-color;
}
.@{container-prefix}-input:focus,.@{container-prefix}-input:hover,.@{container-prefix}-input-affix-wrapper:hover{
  border-color: @border-focus-color !important;
}
.@{container-prefix}-input-search-button:hover,.@{container-prefix}-input-search-button:focus{
  border-color: @border-focus-color !important;
}
.@{container-prefix}-input-search-button:hover{
  svg{
    fill: @border-focus-color !important;
  }
}

//下拉框样式
.@{container-prefix}-select{
  .@{container-prefix}-select-selector{
  }
  .@{container-prefix}-select-selector:focus{
    border-color: @border-focus-color !important;
  }
  .@{container-prefix}-select-selector:hover{
    border-color: @border-focus-color !important;
  }
  // .@{container-prefix}-select-selector{
  //   border-color: @border-focus-color !important;
  // }
}
.@{container-prefix}-select:hover{
  border-color: @border-focus-color !important;
  .@{container-prefix}-select-selector{
    border-color: @border-focus-color !important;
  }
}
//修改下拉框的dropDown
.@{container-prefix}-select-dropdown{
  .@{container-prefix}-select-item{
    height: 40px;
    align-items: center;
  }
  .@{container-prefix}-select-item-option-active{
    background-color: #fff !important;
  }
  .@{container-prefix}-select-item-option-active:hover{
    background-color: #E6F4FF !important;
  }
  .@{container-prefix}-select-item-option-selected{
    background-color: #E6F4FF !important;
  }
}

//按钮取消光晕
.@{container-prefix}-wave{
  border: 0 none;
  opacity: 0;
  animation:none 0 ease 0 1 normal;
}

p{
  margin: 0;
}
//默认按钮
.primary_btn_log{
  height: 32px;
  width: 64px;
  background-color: @button-normal-color;
  color: #fff;
  border-radius: @button-radius;
}
.primary_btn_log:hover{
  background-color: @button-hover-color !important;
  color: #fff !important;
  box-shadow: none !important;
}
.primary_btn_log:focus{
  background-color: @button-click-color !important;
  border-color: @button-click-color !important;
  box-shadow: none !important;
}

//禁止按钮
.disable_btn_log{
  height: 32px;
  width: 64px;
  background-color: #f7f7f7ff;
  color: #ccc;
  border-radius: 6px;
}

.cancel_btn_log{
  height: 32px;
  width: 64px;
  border: 1px solid @button-disabled-color;
  color: @title-color;
  border-radius: @button-radius;
}
.cancel_btn_log:hover{
  border: 1px solid @button-hover-color;
  color: @button-hover-color;
}
.cancel_btn_log:focus{
  border: 1px solid @button-click-color;
  color: @button-click-color;
}

  //取消表单内边距
  .form_padding_bottom{
    padding-bottom: 20px !important;
    .@{container-prefix}-form-item{
      margin-bottom: 0px !important;
    }
  }

  .table_padding{
    padding:0 32px;
  }
  //分页调整
  .page{
    padding: 20px 32px 32px 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin: 0 !important;
    .@{container-prefix}-pagination-item,.@{container-prefix}-pagination-next,.@{container-prefix}-pagination-prev,.@{container-prefix}-select-selector{
      border-radius: @button-radius;
      background: #fff;
      border: 1px solid @page-border-color;
    }
    .@{container-prefix}-pagination-options-quick-jumper{
      input{
        border-radius: @button-radius;
        background: #fff;
        border: 1px solid @page-border-color;
      }
      input:hover{
        border: 1px solid @border-focus-color !important;
      }
    }
    .@{container-prefix}-pagination-item:hover{
      border: 1px solid @border-focus-color;
      background-color: #fff !important;
    }
    .@{container-prefix}-select:hover{
      .@{container-prefix}-select-selector{
        border: 1px solid @border-focus-color !important;
        background-color: #fff !important;
      }
    }
    .@{container-prefix}-pagination-next:hover,.@{container-prefix}-pagination-prev:hover{
      border: 1px solid @border-focus-color;
      button{
        background-color: #fff !important;
      }
    }
    .@{container-prefix}-pagination-item-active{
      background: @button-normal-color !important;
      border: 1px solid @button-normal-color !important;
     a{
      color: #fff;
     }
    }
  }

  //表格与分页flex
  .tab_table_flex{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
  }
  .cluster_container_height{
    min-height: 555px;
  }

  .container_content{
/**全局a标签**/
  a{
    color: @a-link-color;
  }
  a:hover{
    color: @a-link-hover-color !important;
  }
  }

  //容器边距
  .container_margin_box{
    margin: 20px 32px;
    background-color: @page-container-color;
  }

  /** 增加动态伪类**/
.pending_circle:before,
.running_circle:before,
.succeeded_circle:before,
.failed_circle:before,
.terminated_circle:before,
.waiting_circle:before,
.unknown_circle:before,
.active_circle:before,
.terminating_circle:before,
.up_circle:before,
.down_circle:before,
.inactive_circle:before
{
  content:" ";
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
}

.pending_circle:before{
  background-color: #FFBB33;
}

.waiting_circle:before{
  background-color: #FFBB33;
}

.running_circle:before,.up_circle:before{
  background-color: #20C41A;
}
.succeeded_circle:before{
  background-color: #77AEF7;
}

.active_circle:before{
  background-color: #52c41aff;
}

.failed_circle:before,.down_circle:before{
  background-color:#e94547ff ;
}

.unknown_circle:before,.inactive_circle:before{
  background-color: #89939B;
}

.terminating_circle:before{
  background-color: #F9A975;
}

.terminated_circle:before{
  background-color:#e94547ff ;
}

//增加deployment
.Updating_circle:before,
.Applying_circle:before,
.Patching_circle:before,
.Creating_circle:before,
.Deleted_circle:before,
.Removed_circle:before{
  content:" ";
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
}
.Applying_circle:before{
  background-color: #20C41A;
}
.Updating_circle:before,.Patching_circle:before{
  background-color: #FFBB33;
}
.Creating_circle:before{
  background-color: #77AEF7; 
}
.Deleted_circle:before{
  background-color:#e94547ff ;
}
.Removed_circle:before{
  background-color: #89939B;
}

.status_group{
  display: flex;
  flex-direction: row;
  align-items: center;
  span:nth-child(2)
  {
    margin-left:8px;
  }
}

//告警等级
.alaram_level_group{
  width: 56px;
  height: 28px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
}
.error_level{
  background: #fff2f0ff;
  color: #f5595b !important;
  border: 1px solid #f5595b;
}
.info_level{
  background: #f0f8ffff;
  color: #4b8bea !important;
  border: 1px solid #4b8bea;
}
.warning_level{
  background: #fffaf3ff;
  color: #ff8000 !important;
  border: 1px solid #ff8000;
}

  //通用详情卡片
  .detail_card{
    padding: 32px 64px 32px 32px;
    h3{
      color:@title-color;
      margin:0;
      font-size: 16px;
      line-height: 22px;
      font-weight: bold;
    }
    .detail_info_box{
      padding: 20px 0 0 32px;
    .base_info_list{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      .flex_item_opt{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .base_description{
          display: flex;
          flex-direction: row;
          align-items: center;
          font-size: 14px;
          line-height: 22px;
          margin-bottom:16px;
          p{
            margin: 0;
          }
          p:nth-child(1){
            color: #89939b;
          }
          p:nth-child(2){
            margin-left:24px;
            color:@title-color;
          }
          .status_pod{
            margin-left:24px;
            display: flex;
            flex-direction: row;
            align-items: center;
            p:nth-child(2){
              margin-left:8px;
            }
            .special{
              color:#333333;
            }
          }
        }
      }
      .flex_item_opt:nth-child(2){
        margin-left:387px;
      }
      }
      .annotation{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom:16px;
        .ann_title{
          display: flex;
          flex-direction: row;
          align-items: center;
          p{
            margin:0;
            color: #89939b;
            margin-right: 16px;
          }
      }
      .key_value{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        .label_item{
          margin-top:12px;
          margin-right: 8px;
          .label_tag_key{
            padding: 3px 12px 2px 12px;
            border-radius: 2px 0 0 2px;
          }
          .label_tag_value{
            white-space: pre-wrap;
            padding: 3px 12px 2px 12px;
            border-radius: 0px 2px 2px 0;
          }
          .@{container-prefix}-tag{
            margin-inline-end: 0px !important;
            color: @title-color !important;
            font-size:14px;  
          }
        }
        .label_item:last-child{
          margin-right: 0px;
        }
      }
    }
    }
  }

  .container_card_add{
    padding:0px 64px 0px 32px;
    h3{
      margin-bottom: 20px;;
    }
    .echarts_list{
      padding-bottom: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .echarts_item{
        margin-left: 100px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .@{container-prefix}-progress-text{
          color:#333333;
          font-size:16px;
          font-weight: Bold;
        }
        p{
          margin:0;
        }
        .ecahrts_title{
          align-self: center;
          margin-bottom:11px;
        }
        .word_flex{
          margin-left:10px;
          width: 80%;
          margin-top:20px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start; 
          p{
            display: flex;    
            flex-direction: row;
            justify-content: space-between;
            span:nth-child(1){
              color: #89939B;
            }
          }
          p:nth-child(1){
            margin-bottom:14px;
          }
        }
      }
    }
    .resource_list{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      padding: 25px 32px;
      .resource_item{
        margin-right:190px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .resource_icon{
          width: 40px;
          height: 40px;
        }
        .resource_word{
          margin-left: 12px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          p{
            margin: 0;
          }
          p:nth-child(2){
            margin-top:12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            svg{
              width: 20px;
              height: 20px;
            }
            .node_healthy_status{
              margin-left:8px;
              color: #333333;
              font-size: 14px;
            }
            .unset_svg{
              color: #356AC4;
              margin-left:16px;
              cursor: pointer;
              width: 18px;
              height: 18px;
            }
          }
        }
      }
      .resource_item:last-child{
        margin-right:0;
      }
    }
  }

  //带图标按钮
  .icon_btn_log{
    display: flex;
    padding-left:0;
    flex-direction: row;
    align-items: center;
  }

  //覆盖antd弹窗按钮
  .@{container-prefix}-modal-footer{
    .@{container-prefix}-btn{
      width: 96px !important;
      height: 32px !important;
    }
  }

  //message样式调整
  .@{container-prefix}-message-info{
    .anticon-exclamation-circle{
      color: @icon-normal_color !important;
    }
  }

  .@{container-prefix}-message-success{
    .anticon-exclamation-circle{
      color: #52C41A !important;
    }
  }

  .@{container-prefix}-message-error{
    .anticon-exclamation-circle{
      color: #E94547 !important;
    }
  }

  .@{container-prefix}-message-warning{
    .anticon-exclamation-circle{
      color: #E94547 !important;
    }
  }

  //检索类选择框
  .primary_select_search{
    width: 160px;
    height: 32px;
    .@{container-prefix}-select-selector{
      border-radius: @button-radius;
      border: 1px solid #cccccc;
    }
  }

  //弹出层弹窗
  .@{container-prefix}-modal-content{
    border-radius: 4px !important;
  }



  /**
  响应式
  **/
  @media screen and (max-width: 1280px) and (min-width:768px) {
    .detail_card{
    .flex_item_opt:nth-child(2){
      margin-left:239px;
    }
    }
    .container_card_add{
      .echarts_list{
        .echarts_item{
          margin-left:0;
          }
      }
    }
  }

  .label_item_table{
    margin-right: 8px;
    .label_tag_key{
      padding: 3px 12px 2px 12px;
      border-radius: 2px 0 0 2px;
    }
    .@{container-prefix}-tag{
      margin-inline-end: 0px !important;
      color: @title-color !important;
      font-size:14px;  
    }
  }
  .label_item:last-child{
    margin-right: 0px;
  }

  //面包屑
  .breadCrumb_self{
    width: auto;
  }

  .create_bread{
    padding-bottom:16px;
  }

  .node_header{
    padding: 20px 64px;
    margin: 20px 32px;
    background-color: @page-container-color;
  }

  //table以及表单
  .searchForm{
    padding: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .search_input{
      width: 300px;
      height: 32px;
      border-radius: @button-radius;
    }
    .@{container-prefix}-input-affix-wrapper{
      border-radius: @button-radius !important;
    }
    .@{container-prefix}-input-suffix{
      svg{
        width: 16px;
        height: 17px;
        color:#686868;
      }
    }
  }

  .table_label{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    span{
      color: #333333 !important; 
      margin-bottom: 13px;
      white-space: pre-wrap;
    }
    span:last-child{
      margin-bottom:0;
    }
  }

  .d2h-file-list-header{
    display: none !important;
  }
  .d2h-file-list{
    display: none !important;
  }

  .backgroundAdjust_box{
    background: @page-background-color !important;
    form{
      background: @page-container-color;
    }
  }
  .monitorRule_table{
    margin-top:20px;
    padding-top:32px;
    background: @page-container-color;
  }
  
  .monitor_detail_info_box{
    margin: 20px 32px;
    background: @page-container-color;
  }
  .monitor_rule_container_width{
    min-height: calc(100vh - 64px - 40px - 102px );
  }
